<template>
  <div class="tag-container">
    <!-- 添加按钮 -->
    <el-button type="primary" @click="showAddDialog">添加</el-button>

    <!-- 标签表格 -->
    <el-table border :data="tagData" style="width: 100%">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="类型" prop="type"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑标签类型">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="类型名称">
          <el-input v-model="editForm.type" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEdit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 新增对话框 -->
    <el-dialog v-model="addDialogVisible" title="新增标签类型">
      <el-form :model="addForm" label-width="80px">
        <el-form-item label="类型名称">
          <el-input v-model="addForm.type" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAdd">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import  { onMounted } from 'vue';

// 数据部分
const tagData = ref([]);
const editDialogVisible = ref(false);
const addDialogVisible = ref(false);

// 编辑表单数据
const editForm = ref({
  id: null,
  type: ''
});

// 新增表单数据
const addForm = ref({
  type: ''
});

// 页面加载时获取所有标签
onMounted(() => {
  getAllTags();
});

// 获取所有标签
const getAllTags = () => {
  axios({
    url: '/api/admin/tag/getAll',
    method: 'POST'
  })
    .then(res => {
      tagData.value = res.data.data;
      ElMessage.success(res.data.msg);
    })
    .catch(error => {
      console.error('请求失败:', error);
      ElMessage.error(error.message || '请求失败，请稍后再试');
    });
};

// 显示新增对话框
const showAddDialog = () => {
  addForm.value = { type: '' };
  addDialogVisible.value = true;
};

// 提交新增
const submitAdd = () => {
  axios({
    url: '/api/admin/tag/add',
    method: 'POST',
    params: {
      type: addForm.value.type
    }
  })
    .then(res => {
      ElMessage.success(res.data.msg);
      getAllTags(); // 刷新列表
      addDialogVisible.value = false; // 关闭对话框
    })
    .catch(error => {
      console.error('请求失败:', error);
      ElMessage.error('添加失败，请重试');
    });
};

// 编辑行
const handleEdit = (row) => {
  editForm.value = { ...row };
  editDialogVisible.value = true;
};

// 提交编辑
const submitEdit = () => {
  axios({
    url: '/api/admin/tag/update',
    method: 'POST',
    params: {
      id: editForm.value.id,
      type: editForm.value.type
    }
  })
    .then(res => {
      ElMessage.success(res.data.msg);
      getAllTags(); // 刷新列表
      editDialogVisible.value = false; // 关闭对话框
    })
    .catch(error => {
      console.error('请求失败:', error);
      ElMessage.error('更新失败，请重试');
    });
};

// 删除行
const handleDelete = (row) => {
  axios({
    url: '/api/admin/tag/delete',
    method: 'POST',
    params: {
      id: row.id
    }
  })
    .then(res => {
      ElMessage.success(res.data.msg);
      getAllTags(); // 刷新列表
    })
    .catch(error => {
      console.error('请求失败:', error);
      ElMessage.error('删除失败，请重试');
    });
};
</script>

<style scoped>
.tag-container {
  margin: 20px;
}
</style>